<template>
  <view class="container">
    <view class="title">可抢工单列表</view>
    <view v-for="(order, index) in orderList" :key="order.id" class="order-card">
      <view class="order-row">
        <text class="label">工单编号：</text>{{ order.code }}
      </view>
      <view class="order-row">
        <text class="label">地址：</text>{{ order.address }}
      </view>
      <view class="order-row">
        <text class="label">描述：</text>{{ order.description }}
      </view>
      <view class="order-row info-row">
        <text class="amount">￥{{ order.amount }}</text>
        <text class="distance">{{ order.distance }}km</text>
      </view>
      <view class="btn-wrap">
        <button type="primary" @click="grabOrder(order.id, index)" :disabled="order.grabbed">
          {{ order.grabbed ? '已抢' : '抢单' }}
        </button>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      orderList: []
    }
  },
  onLoad() {
    this.fetchOrders();
  },
  methods: {
    // 模拟获取待抢工单列表
    fetchOrders() {
      // 实际可替换为 uni.request 接口
      this.orderList = [
        { id: 1, code: 'GD2025070101', address: '徐州市鼓楼区和信广场B座1202', description: '空调不制冷', amount: 120, distance: 1.2, grabbed: false },
        { id: 2, code: 'GD2025070102', address: '徐州市云龙区民祥园小区5号楼203', description: '热水器无法启动', amount: 80, distance: 2.5, grabbed: false },
        { id: 3, code: 'GD2025070103', address: '徐州市泉山区万达华府1期3号楼2204', description: '电路短路跳闸', amount: 100, distance: 3.1, grabbed: false },
        { id: 4, code: 'GD2025070104', address: '徐州市泉山区铜山路南郡小区12号楼101', description: '洗衣机漏水', amount: 90, distance: 0.9, grabbed: false },
        { id: 5, code: 'GD2025070105', address: '徐州市鼓楼区世茂广场A座3208', description: '电视机黑屏', amount: 150, distance: 1.8, grabbed: false },
        { id: 6, code: 'GD2025070106', address: '徐州市云龙区绿地世纪城3期9号楼1002', description: '水管爆裂', amount: 200, distance: 2.1, grabbed: false }
      ];

    },
    // 抢单操作
    grabOrder(orderId, index) {
      // 示例：调用后台接口
      uni.request({
        url: 'https://example.com/api/grabOrder', // 替换为真实接口
        method: 'POST',
        data: { orderId },
        success: (res) => {
          if (res.data.success) {
            this.orderList[index].grabbed = true;
            uni.showToast({
              title: '抢单成功',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: res.data.message || '抢单失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.order-card {
  background-color: #fff;
  padding: 24rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.08);
}
.order-row {
  margin-bottom: 12rpx;
  font-size: 28rpx;
}
.label {
  font-weight: bold;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.amount {
  color: #e64340;
  font-weight: bold;
  font-size: 30rpx;
}
.distance {
  color: #999;
  font-size: 26rpx;
}
.btn-wrap {
  margin-top: 16rpx;
}
</style>

